<ng-container>
  <form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
    <fieldset
      class="amplify-flex amplify-authenticator__column"
      data-amplify-fieldset
      [disabled]="context.isPending"
    >
      <amplify-slot name="confirm-sign-up-header" [context]="context">
        <h3
          class="amplify-heading amplify-authenticator__heading"
          style="font-size: 1.5rem"
        >
          {{ confirmSignUpHeading }}
        </h3>
      </amplify-slot>
      <span class="amplify-authenticator__subtitle">
        {{ subtitleText }}
      </span>
      <amplify-base-form-fields
        route="confirmSignUp"
      ></amplify-base-form-fields>

      <button
        amplify-button
        variation="primary"
        fullWidth="true"
        type="submit"
        [isDisabled]="authenticator.isPending"
      >
        {{ confirmText }}
      </button>
      <button
        amplify-button
        fontWeight="normal"
        (click)="authenticator.resendCode()"
      >
        {{ resendCodeText }}
      </button>
    </fieldset>

    <amplify-error *ngIf="context.error">
      {{ authenticator.error }}
    </amplify-error>
    <amplify-slot
      name="confirm-sign-up-footer"
      [context]="context"
    ></amplify-slot>
  </form>
</ng-container>
